<template>
    <div id="home">
        <el-container>
            <el-header class="diy">
                <el-col :span="8">
                    <span><img class="logo" src="../../assets/Logo.png"> 思云课堂后台业务管理系统</span>
                </el-col>
                <el-col :span="8" :offset="8" class="iconGroup">
                    <i class="el-icon-user"></i><span class="nickname">admin</span> | <i class="el-icon-s-home"></i> | <i class="el-icon-message-solid"></i> |
                    <i class="el-icon-magic-stick"></i> | <i class="el-icon-switch-button"></i>
                </el-col>
            </el-header>

            <el-container>
                <el-aside width="200px">
                    <el-menu router default-active="2" class="el-menu-vertical-demo" background-color="#5A6675" text-color="#fff" active-text-color="#ffd04b">

                        <el-submenu v-for="(item,index) in Menu" :index="item.menuPath">
                            <template slot="title"><i :class="item.menuIcon"></i>{{item.menuName}}</template>

                            <el-menu-item v-for="(items,index) in item.child" :index="items.menuPath">{{items.menuName}}</el-menu-item>

                        </el-submenu>

                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view v-if="isRouterAlive"></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    provide(){
        return{
            reload:this.reload
        }
    },
    created() {
        this.$http.get("/Home/getMenu").then(res => {
            this.Menu = res.data
        })
    },
    data(){
        return{
            Menu:[],
            isRouterAlive:true
        }
    },
    methods:{
        reload(){
            this.isRouterAlive = false;
            this.$nextTick(function () {
                this.isRouterAlive = true;
            })
        }
    }
}
</script>

<style scoped>
    .el-header, .el-footer {
        background-color: #6BC9BB;
        color: #333;
    }
    .logo{
        width: 27px;
        vertical-align: middle;
    }
    .nickname{
        letter-spacing: 0px;
     }
    .el-aside {
        background-color: #5B6675;
        color: #333;
        height: 887px;
    }
    .iconGroup{
        background-color: #79CCC3;
        letter-spacing: 2px;
        text-align: right;
    }
    .diy{
        color: #FFF;
        font-weight: 700;
        line-height: 60px;
        font-size: 18px;
    }
    .el-main {
        background-color: #E9EEF3;
        color: #333;
    }


</style>
